<template>
	 <view style="width:100%;height: 100%;">
		 <u-toast ref="uToast" /><u-no-network></u-no-network>
		 <u-navbar title="工作计划" safeAreaInsetTop fixed placeholder>
		     <view class="coreshop-navbar-left-slot" slot="left">
		         <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
		         <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
		         <u-icon name="home" size="22" @click="goHome"></u-icon>
		     </view>
		     <view slot="right">
		     </view>
		 </u-navbar>
		 <view class="u-page">
			 <u-grid :col="3" :border="false">
				 <u-grid-item bg-color="#F1F1F5" v-for="(item,index) in planList" :key="index">
					 <view class="grid-item-box" @click="goAddPlan(item.value)">
					 	<u-image :src="item.icon" width="40" height="40" :lazy-load="false" :show-loading="false" :fade="false"></u-image>
					 	<view class="grid-text">{{item.label}}</view>
					 </view>
				 </u-grid-item>
			 </u-grid>  
			 
				<view class="coreshop-flex u-flex coreshop-justify-between coreshop-align-center card" @click="goList('1')">
					<view class="coreshop-flex u-flex ml-3">
						<u-image src="/static/images/plan/xie.png" width="35" height="35" :lazy-load="false" :show-loading="false" :fade="false"></u-image>
						<view class="ml-2">
							<view class="title">我发布的计划</view>
							<view class="info">累计收到评论 ({{myNum || 0}})</view>
						</view>
					</view>
					<view class="mr-3">
						<u-image src="/static/images/icon/arrow.png" width="15" height="15" :lazy-load="false" :show-loading="false" :fade="false"></u-image>
					</view>
				</view> 
				<view class="coreshop-flex u-flex coreshop-justify-between coreshop-align-center card" @click="goList('2')">
					<view class="coreshop-flex u-flex ml-3">
						<u-image src="/static/images/plan/yuedu.png" width="35" height="35" :lazy-load="false" :show-loading="false" :fade="false"></u-image>
						<view class="ml-2">
							<view class="title">我收到的计划</view>
							<view class="info">累计收到计划 ({{receiveNum || 0}})</view>
						</view>
					</view>
					<view class="mr-3">
						<u-image src="/static/images/icon/arrow.png" width="15" height="15" :lazy-load="false" :show-loading="false" :fade="false"></u-image>
					</view>
				</view> 
				 <view class="coreshop-flex u-flex coreshop-justify-between coreshop-align-center card" @click="goList('3')">
				 	<view class="coreshop-flex u-flex ml-3">
				 		<u-image src="/static/images/plan/draft.png" width="35" height="35" :lazy-load="false" :show-loading="false" :fade="false"></u-image>
				 		<view class="ml-2">
				 			<view class="title">计划草稿箱</view>
				 			<view class="info">累计草稿 ({{draftNum || 0}})</view>
				 		</view>
				 	</view>
				 	<view class="mr-3">
				 		<u-image src="/static/images/icon/arrow.png" width="15" height="15" :lazy-load="false" :show-loading="false" :fade="false"></u-image>
				 	</view>
				 </view> 
				 <view class="coreshop-flex u-flex coreshop-justify-between coreshop-align-center card" @click="goList('4')">
				 	<view class="coreshop-flex u-flex ml-3">
				 		<u-image src="/static/images/plan/read.png" width="35" height="35" :lazy-load="false" :show-loading="false" :fade="false"></u-image>
				 		<view class="ml-2">
				 			<view class="title">评阅计划</view> 
				 		</view>
				 	</view>
				 	<view class="mr-3">
				 		<u-image src="/static/images/icon/arrow.png" width="15" height="15" :lazy-load="false" :show-loading="false" :fade="false"></u-image>
				 	</view>
				 </view> 
				 
		 </view>
		 
		 <!-- 登录提示 -->
		 <coreshop-login-modal></coreshop-login-modal>
	 </view>
</template>

<script>
	export default{
		data(){
			return{
				planList:[], 
				iconArr:['/static/images/plan/icon6-dangtian.png','/static/images/plan/icon5-zhou.png','/static/images/plan/icon4-yue.png','/static/images/plan/icon1-nian.png',
				'/static/images/plan/icon7-huiyi.png','/static/images/plan/icon8-qita.png','/static/images/plan/icon9-shangji.png'],
				myNum:0,
				receiveNum:0,
				draftNum:0,
			}
		},
		onLoad() {
			this.getWorkPlanType();
		},
		methods:{
			getWorkPlanType(){
				let self=this;
				this.$u.api.getWorkPlanType().then(res => {
				    if (res.status) {
						if(res.data!=null){
							self.planList=[];
							res.data.forEach((item,index)=>{
								self.planList.push({
									label:item.description,
									value:item.value,
									icon: index > (self.iconArr.length-1) ? '' : self.iconArr[index]
								});
							})
							self.$db.set('workPlanType', self.planList)
						}
				    }else{
						this.$u.toast(res.msg)
					}
				});
			},
			goAddPlan(e){ 
					if(e==1){ //当天计划
						uni.navigateTo({
							url:`/pages/member/agent/dayPlanDetail/index`
						})
					}else{
						uni.navigateTo({
							url:`/pages/member/agent/planList/index?planClass=${e}`
						})
					} 
			},
			goList(e){
					if(e=='1' || e=='2'){
						uni.navigateTo({
							url:`/packagePlan/pages/planList/index?planAuth=${e}`
						})
					}
					if(e=='3'){//草稿箱
						uni.navigateTo({
							url:`/packagePlan/pages/planList/index?planAuth=1&draft=1`
						})
					}
					if(e=='4'){//评阅计划
						uni.navigateTo({
							url:`/packagePlan/pages/planListSub/index`
						})
					}
			},
		}
	}
</script>

<style scoped lang="scss">
	.u-page{
			padding: 33rpx 33rpx 40rpx;
			&::v-deep{
				&{
					.u-grid-item-box{
						padding: 0!important;
					}
				}
			}
		}
		.grid-text {
			font-size: 24rpx;
			color: #7A808A;
			margin-top: 16rpx;
		}
		.title{
			font-size: 28rpx;
			color: #333;
		}
		.info{
			font-size: 24rpx;
			color: #7A808A;
		}
		.grid-item-box{
			width: 214rpx;
			height: 160rpx;
			margin: 7rpx;
			background: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
		}
	.card{
		border: 1px solid #F7F7F7;background-color: #FFFFFF;border-radius:16rpx;height: 130rpx;margin-top: 20rpx;
	}
	.mr-3{
		margin-right: 30rpx;
	}
	.ml-2{
		margin-left: 20rpx;
	}
	.ml-3{
		margin-left: 30rpx;
	}
</style>